<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <script src="./vue.js"></script>
  <body>
    <!-- 模板 -->
    <div id="example">
      <!-- 在模板插值中，我们可以使用单个JavaScript表达式 -->
      <div>{{ message.split('').reverse().join('') }}</div>

      <!--过滤器函数将会收到 message 的值作为第一个参数-->
      <div>{{ message|capitalize}}</div>

      <div>{{ message|reverse}}</div>

      <!-- 过滤器可以串联 -->
      <div>{{ message|capitalize|reverse }}</div>

      <!-- message 的值作为第一个参数,value2作为第二个参数， -->
      <div>{{ message|concat(30)}}</div>
    </div>

    <script>
      //数据

      let data = {
        message: 'vue学习计划'
      }

      //vm实例
      var vm = new Vue({
        el: '#example',

        data: data,

        filters: {
          capitalize: function(value) {
            //过滤器函数：把首字母转换成大写

            if (!value) return ''

            value = value.toString()

            return value.charAt(0).toUpperCase() + value.slice(1)
          },

          reverse: function(value) {
            if (!value) return ''

            return value
              .split('')
              .reverse()
              .join('')
          },

          concat: function(value, value2) {
            if (!value) return value2

            return value + ':' + value2 + '天'
          }
        }
      })
    </script>
  </body>
</html>
